import Toolbar from "@/components/ViewComponents/Toolbar";
import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import { useTranslation } from "react-i18next";
import { BasicForm, useForm } from "@/components/Form";
import { patServicesPage } from "@/api/MedicalExamination";
import { getAge } from "@/utils/helper/dataHelper";
import { useRef } from "react";

const index = () => {
	const { t } = useTranslation();
	const searchFormSchema: FormSchema[] = [
		{
			label: t("felix_ui.dt_date"),
			field: "rxDtime",
			component: "DatePicker"
		},
		{
			label: t("felix_ui.cli_name"),
			field: "deptName",
			component: "Select"
		},
		{
			label: t("felix_ui.grp_subject"),
			field: "subject",
			component: "Input"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.cli_name"),
			dataIndex: "cliName"
		},
		{
			title: t("felix_ui.total_consulted"),
			dataIndex: "totalConsulted"
		},
		{
			title: t("felix_ui.no_consulted"),
			dataIndex: "noConsulted"
		},
		{
			title: t("kevin_ui.service_work"),
			dataIndex: "serviceWork"
		},
		{
			title: t("kevin_ui.display_clinic_name"),
			dataIndex: "displayClinicName"
		}
	];
	const columnsLeft: BasicColumn[] = [
		{
			title: t("patientBasic.patient_id"),
			dataIndex: "patientId",
			render: (_, record) => (record.patients ? record.patients.patientId : "")
		},
		{
			title: t("patientBasic.full_name"),
			dataIndex: "fullName",
			render: (_, record) => (record.patients ? record.patients.fullName : "")
		},
		{
			title: t("patientBasic.birthyear"),
			dataIndex: "birthday",
			render: (_, record) => (record.patients ? getAge(record.patients.birthday) : "")
		},
		{
			title: t("patientBasic.gender"),
			dataIndex: "gender",
			render: (_, record) => (record.patients ? record.patients.gender : "")
		}
	];
	const columnsRight: BasicColumn[] = [
		{
			title: t("felix_ui.service"),
			dataIndex: "svcName"
		},
		{
			title: t("felix_ui.pat_subject"),
			dataIndex: "svcType"
		},
		{
			title: t("felix_ui.doctor"),
			dataIndex: "doctorName"
		},
		{
			title: t("felix_ui.hospital_fees"),
			dataIndex: "svcPrice"
		},
		{
			title: t("felix_ui.status"),
			dataIndex: "status"
		}
	];
	const TopList = [
		{
			cliName: "Felix",
			totalConsulted: "LENGEND",
			noConsulted: "2025-8-8",
			serviceWork: "Renger",
			displayClinicName: "DUDUDU···"
		}
	];

	const [registerForm] = useForm({
		labelWidth: 120,
		schemas: searchFormSchema,
		showActionButtonGroup: true
	});
	const [registerTable] = useTable({
		columns,
		dataSource: TopList,
		maxHeight: 250
	});
	const selectPatientId = useRef("");
	const [registerTableMainLeft] = useTable({
		columns: columnsLeft,
		api: patServicesPage,
		title: "P203. PKA NÃi Tim Mach",
		maxHeight: 200,
		rowSelection: {
			type: "radio",
			onSelect: record => {
				selectPatientId.current = record.patientId;
				reloadMainRight();
			}
		}
	});
	const [registerTableMainRight, { reload: reloadMainRight }] = useTable({
		columns: columnsRight,
		api: patServicesPage,
		title: "Đỗ Thế Hoàng Vũ",
		maxHeight: 200,
		beforeFetch: params => ({ ...params, patientId: selectPatientId.current }),
		immediate: false
	});

	return (
		<div className="page">
			<div className="page-content">
				<div className="block">
					<BasicForm register={registerForm}></BasicForm>
				</div>
				<BasicTable className="mt-2" register={registerTable}></BasicTable>
				<div className="flex mt-2 flex-none">
					<div className="block w-50% flex-none">
						<BasicTable register={registerTableMainLeft}></BasicTable>
					</div>
					<div
						className="block ml-2 flex-none"
						style={{
							width: "calc(50% - 0.5rem)"
						}}
					>
						<BasicTable register={registerTableMainRight}></BasicTable>
					</div>
				</div>
			</div>
			<Toolbar btnList={[{ key: "print", disabled: true }]} />
		</div>
	);
};
export default index;
